<template>
      <el-card>
          <div class="card-header">
             <slot name="header"></slot>
          </div>

          <div class="card-content">
              <slot name="content"></slot>
          </div>

          <div class="card-charts">
              <slot name="charts"></slot>
          </div>

          <div class="card-footer">
              <slot name="footer"></slot>
          </div>
      </el-card>
</template>

<script>
export default {
name:'Card'
}
</script>

<style lang="scss" scoped>
$color:yellowgreen;
.card-header{
    display: flex;
    justify-content: space-between;
    color: $color;
}
.card-content{
    color: $color;
    font-weight: 700;
    font-size: 20px;
    font-style: italic;
    margin:10px 0;
}
.card-charts{
    height: 80px;
    box-shadow: 1px 1px 1px #eee;
    color: $color;
    line-height: 80px;
}
.card-footer{
    margin:10px 0;
    color: $color;
}
</style>